<!--
 * @FilePath: src/views/Dashboard/ElementCrossplot.vue
 * @Description: ElementCrossplot.vue
-->
<template>
  <div class="element-crossplot echart-dashbaord">
    <!-- <el-row>
      <el-select v-model="element1" placeholder="元素一">
        <el-option v-for="it in options" :key="'e1_' + it.value" :label="it.label" :value="it.value"> </el-option>
      </el-select>
      <el-select v-model="element2" placeholder="元素二">
        <el-option v-for="it in options" :key="'e2_' + it.value" :label="it.label" :value="it.value"> </el-option>
      </el-select>
      <el-button type="primary" @click="drawEchart">确定</el-button>
    </el-row> -->
    <div ref="chart" class="echart-container"></div>
  </div>
</template>

<script>
import chart_mixin from "./chart-mixin.js"
import { groupedElement, lithology_lines } from "./element.js"
import tableImage from "@/assets/mg-k.png"
// 岩石类型数据
const rockTypes = [
  { name: "长石岩屑砂岩", icon: "circle", color: "#5470c6" },
  { name: "粉细砂岩", icon: "rect", color: "#91cc75" },
  { name: "云质砂岩", icon: "diamond", color: "#fac858" },
  { name: "砂质云岩", icon: "pin", color: "#ee6666" },
  { name: "泥晶白云岩", icon: "arrow", color: "#73c0de" },
  { name: "泥岩", icon: "triangle", color: "#3ba272" }
]

export default {
  name: "ElementCrossplot",
  mixins: [chart_mixin],
  data() {
    return {
      chart: null,
      elementGrouped: [],
      element1: 6,
      element2: 2,
      label1: "",
      label2: "",
      options: [
        { value: 2, label: "K" },
        { value: 3, label: "Si" },
        { value: 4, label: "Al" },
        { value: 5, label: "Ca" },
        { value: 6, label: "Mg" },
        { value: 7, label: "S" },
        { value: 8, label: "P" },
        { value: 9, label: "Fe" },
        { value: 10, label: "Mn" }
      ]
    }
  },
  mounted() {
    this.$nextTick().then(this.initialize).then(this.drawEchart)
  },
  methods: {
    drawEchart() {
      // dataset/element-cross.js - dataset: Mg - K
      this.elementGrouped = groupedElement(1, 7)
      this.label1 = this.options.find(t => t.value == this.element1).label
      this.label2 = this.options.find(t => t.value == this.element2).label
      this.$nextTick(this.renderEchart)
    },
    renderEchart() {
      const [ds1, ds2, ds3, ds4, ds5, ds6] = this.elementGrouped
      const symbolSize = 6
      const option = {
        title: {
          text: `${this.label1}-${this.label2}元素交汇图`,
          left: "center",
          top: "top",
          show: true
        },
        legend: {
          data: rockTypes,
          bottom: 10,
          itemGap: 20
          // textStyle: { fontSize: symbolSize }
        },
        xAxis: {
          name: `${this.label1}含量(%)`,
          nameLocation: "middle",
          nameTextStyle: { fontSize: 18 }
        },
        yAxis: {
          name: `${this.label2}含量(%)`,
          nameLocation: "middle",
          max: 9,
          nameTextStyle: { fontSize: 18 }
        },
        graphic: [
          {
            type: "image",
            top: "30px",
            right: "60px",
            z: 100,
            style: {
              image: tableImage, // 使用本地图片
              width: 230,
              height: 147
            }
          }
          // {
          //   type: "rect",
          //   shape: {
          //     cx: 1, // 根据实际坐标调整
          //     cy: 3.25,
          //     width: 4,
          //     height: 1
          //   },
          //   z: 100,
          //   textContent: {
          //     style: {
          //       text: "长石岩屑砂岩",
          //       fill: "#000"
          //     },
          //     position: [1.5, 3.5]
          //   },
          //   style: {
          //     fill: "transparent",
          //     stroke: "#3498db",
          //     lineWidth: 2
          //   }
          // }
        ],
        series: [
          {
            name: "长石岩屑砂岩",
            symbol: "circle",
            symbolSize,
            data: ds1,
            type: "scatter"
          },
          {
            name: "粉细砂岩",
            symbol: "rect",
            symbolSize,
            data: ds2,
            type: "scatter"
          },
          {
            name: "云质砂岩",
            symbol: "diamond",
            symbolSize,
            data: ds3,
            type: "scatter"
          },
          {
            name: "砂质云岩",
            symbol: "pin",
            symbolSize,
            data: ds4,
            type: "scatter"
          },
          {
            name: "泥晶白云岩",
            symbol: "arrow",
            symbolSize,
            data: ds5,
            type: "scatter"
          },
          {
            name: "泥岩",
            symbol: "triangle",
            symbolSize,
            data: ds6,
            type: "scatter"
          },
          ...lithology_lines
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped>
.echart-dashbaord {
  padding: 1rem;
}
.echart-container {
  width: 100%;
  min-height: 500px;
}
</style>
